<template>
	<view>
		<page-bg-liner></page-bg-liner>
		<view class="top-box container"
			:style="{width:windowWidth+'px',minHeight:windowHeight+'px',paddingTop:(statusBarHeight + 10)+'px'}">
			<view class="add_icon" @click="addHandle">
				<image style="width: 101rpx;height: 101rpx;" src="/static/img/add-xl.png"></image>
			</view>
			<cu-custom :bgLiner="bgLiner">
				<block slot="content">企业详情</block>
			</cu-custom>
			<view class="card_top_con">
				<view class="item flex">
					<view class="name" style="min-width: 140rpx;">企业名称:</view>
					<view class="con">{{info.company}}</view>
				</view>
				<view class="item flex">
					<view class="li flex width50">
						<view class="name" style="min-width: 140rpx;">拜访次数:</view>
						<view class="con">{{info.visit_count||0}}次</view>
					</view>
					<view class="li flex width50">
						<view class="name" >产品:</view>
						<view class="" v-if="info.product_category_ids">
							<view class="con icon m-t-1 m-b-1">{{info.tag_str}}</view>
						</view>
						<view class="" v-if="info.product_category_ids==''">
							暂无
						</view>
					</view>
				</view>
				<view class="item flex" v-if="info&&info.timeStr">
					<view class="name" style="min-width: 200rpx;">下次拜访时间:</view>
					<view class="con">{{info.timeStr}}</view>
				</view>
			</view>
			<view class="meun flex align-center">
				<picker mode="selector" :range="orderData.tagArr" range-key="name" @change="changeTag" v-if="orderData.tagArr.length">
					<view class="menu_item flex align-center">
						<view class="name">{{orderData.tagName&&orderData.tagName!='全部'?orderData.tagName:'产品'}}</view>
						<view class="icon">
							<image src="/static/img/xiangxia-gray.png" style="width: 18rpx;height: 13rpx;"></image>
						</view>
					</view>
				</picker>
				<!-- <picker mode="selector" :range="orderData.orderArr" range-key="name" @change="changeOrder">
					
				</picker> -->
				<view class="menu_item flex align-center" @click="changeOrder">
					<view class="name">时间</view>
					<view class="icon flex flex-direction" v-show="orderData.order==1">
						<image src="/static/img/xiangshang-blue.png" style="width: 18rpx;height: 13rpx;"></image>
						<image src="/static/img/xiangxia-gray.png" class="m-t-2" style="width: 18rpx;height: 13rpx;"></image>
					</view>
					<view class="flex flex-direction" v-show="orderData.order==2">
						<image src="/static/img/xiangxia-gray.png" class="icon-img" style="width: 18rpx;height: 13rpx;"></image>
						<image src="/static/img/xiangshang-blue.png" class="m-t-2 icon-img" style="width: 18rpx;height: 13rpx;"></image>
						
					</view>
				</view>
				<picker mode="selector" :range="orderData.statusArr" range-key="name" @change="changeStatus">
					<view class="menu_item flex align-center">
						<view class="name">{{orderData.statusName&&orderData.statusName!='全部'?orderData.statusName:'状态'}}</view>
						<view class="icon">
							<image src="/static/img/xiangxia-gray.png" style="width: 18rpx;height: 13rpx;"></image>
						</view>
					</view>
				</picker>
			</view>
			<view class="card_con" v-for="(item,index) in list" :key="index" @click.stop="toEdit(item)">
				<view class="item flex align-start">
					<view class="name" style="min-width: 140rpx;">拜访时间：</view>
					<view class="con">{{item.today}}
						{{item.start_at?item.start_at.slice(11,16):''}}
					</view>
					<view class="icon_name">
						<!-- status 1待拜访 2已签到 3已逾期 4进行中 旧-->
						<!-- status ["全部","待拜访","已签到","已拜访","已逾期"] 新-->
						<!-- <view v-if="item.status === 4" class="name" style="background-color:#f7e7e5;color:#d93b30;"> 已逾期
						</view> -->
						<view v-if="item.status === 3" class="name"> 已拜访
						</view>
						<view v-if="item.status === 2" class="name" style="background-color:#E9FFE7;color:#258404;"> 已签到</view>
						<view v-if="item.status === 1" class="daka" style="text-align: center;"
							@click.stop="toSign(item)">
							<image src="/static/img/local-orange.png" style="width: 45rpx;height: 56rpx;"></image>
							<view style="font-size: 26rpx;">签到打卡</view>
						</view>
					</view>
				</view>
				<view class="item width100 flex flex-wrap">
					<view class="name" >产品：</view>
					<view class="flex flex-wrap">
						<view class="con icon m-t-1 m-b-1 m-r-3" v-for="item2 in item.product_category_arr">{{item2.name}}</view>
					</view>
					<view class="" v-if="item.product_category_arr&&item.product_category_arr.length==0">
						暂无
					</view>
				</view>

				<view class="item  flex align-start">
					<view class="name" style="min-width: 140rpx;">结果分析：</view>
					<view class="con relative width100" :class="{clickable:(item.analysis_result==null && item.audio_count>0)}" @click.stop="analysis(item)">
						<view v-if="item.audio_count==0">待录音</view>
						<view v-else-if="item.analysis_result==null">点击生成</view>
						<view v-else-if="item.analysis_result=='1'">生成中</view>
						<view v-else>
							<view  @click.stop="resultShowChange(index,1)">已生成</view>
							<view @click.stop="resultShowChange(index,1)" class="_icon absolute"
								style="right: 0;top: 0;"><uni-icons :type="!item.resultShow ? 'down':'up'" color="#999"
									size="21"></uni-icons></view>
						</view>
					</view>
				</view>
				<view class="item_remark" v-if="item.resultShow&&item.analysis_result">
					<zero-markdown-view :markdown="item.analysis_result"></zero-markdown-view>
				</view>
				<view class="item  flex align-start" v-if="item.sign_in_at">
					<view class="name" style="min-width: 140rpx;">打卡记录：</view>
					<view class="con relative width100">
						<view> 打卡时间 {{item.sign_in_at}}</view>
						<view v-if="item.recordShow">
							<view style="font-size: 26rpx;margin-top: 10rpx;width: calc(100% - 200rpx);"> {{item.address}}</view>
							<view style="color: #999;font-size: 26rpx;margin-top: 10rpx;width: calc(100% - 200rpx);" v-if="item.sign_in_address">
								<image src="/static/img/local-gray.png"
									style="min-width:20rpx ;width:20rpx;height:26rpx;margin-right: 10rpx;"></image>
								{{item.sign_in_address}}
							</view>
							<image :src="item.sign_in_img" @click.stop="preImg(item)"
								style="width: 130rpx;height: 130rpx;position: absolute;right: 0rpx;top: 50rpx;"
								v-if="item.sign_in_img"></image>
						</view>
						<view v-if="item.status === 2" @click.stop="resultShowChange(index,2)" class="_icon absolute"
							style="right: 0;top: 0;"><uni-icons :type="!item.recordShow ? 'down':'up'" color="#999"
								size="21"></uni-icons></view>
					</view>
				</view>
				<view class="item_btn_list flex">
					<view class="btn flex flex-wrap align-center" @click.stop="toRecord(item)">
						<view class="btn_box width100 flex justify-center">
							<image style="width: 36rpx;height: 49rpx"
								src="/static/img/recording.png"></image>
							<!-- <image v-if="item.audio_json" style="width: 56rpx;height: 49rpx"
								src="/static/img/recording-file.png"></image> -->
						</view>
						<!-- <view class="text" :style="{color:item.audio_json? '#999':'#333'}">{{item.audio_json? '查看录音' : '录音'}}
						</view> -->
						<view class="text">录音
						</view>
					</view>
					<view class="btn flex flex-wrap align-center" @click.stop="toUpload(item)">
						<view class="btn_box width100 flex justify-center">
							<image style="width: 45rpx;height: 49rpx" src="/static/img/files.png"></image>
						</view>
						<view class="text">上传附件</view>
					</view>
				</view>
			</view>
		</view>
		<view class="nodata" v-if="list.length==0">
			暂无数据
		</view>
		<!-- <view style="width: 100%;height: 300rpx;border: 1px solid;margin-top: 50rpx;clear: both;"></view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				titleIndex: 1,
				activeIndex: 1,
				statusBarHeight: 20,
				windowWidth: 0,
				windowHeight: 0,
				value: '',
				id: 0,
				bgLiner: false,
				info: {},
				list: [],
				orderData: {
					order: 1,
					orderName:'',
					tag_id: '',
					tagName:'',
					status: 0,
					statusName:'',
					orderArr: [{
						id: 1,
						name: '时间小到大'
					}, {
						id: 2,
						name: '时间大到小'
					}],
					tagArr: [],
					statusArr: []
				}
			}
		},
		onLoad(option) {
			this.id = option.id;
			this.windowHeight = uni.getSystemInfoSync().windowHeight;
			this.windowWidth = uni.getSystemInfoSync().windowWidth;
			uni.getSystemInfo({
				success: (res) => {
					this.statusBarHeight = res.statusBarHeight;
				}
			});
			this.getInfo();
		},
		onShow() {
			let isUpDate = this.$store.state.isUpDate;
			if (isUpDate) {
				this.getInfo();
				this.$store.state.isUpDate = false;
			}
		},
		onPageScroll(e) {
			if (e.scrollTop > 50) {
				this.bgLiner = true;
			} else {
				this.bgLiner = false;
			}
		},
		methods: {
			addHandle() {
				uni.navigateTo({
					url: '/pages/system/addVisit?clients_id=' + this.id
				})
			},
			
			resultShowChange(index, num) { // 1 结果分析 2 打卡记录
				if (num === 1) {
					this.list[index].resultShow = !this.list[index].resultShow
				} else if (num === 2) {
					this.list[index].recordShow = !this.list[index].recordShow
				}
			},
			changeOrder(e) {
				// let val = e.detail.value;
				// this.orderData.orderName = this.orderData.orderArr[val].name;
				// this.orderData.order = this.orderData.orderArr[val].id;
				this.orderData.order = this.orderData.order==1?2:1;
				this.getInfo();
			},
			changeTag(e) {
				let val = e.detail.value;
				this.orderData.tagName = this.orderData.tagArr[val].name;
				this.orderData.tag_id = this.orderData.tagArr[val].id;
				this.getInfo();
			},
			changeStatus(e) {
				let val = e.detail.value;
				this.orderData.statusName = this.orderData.statusArr[val].name;
				this.orderData.status = this.orderData.statusArr[val].id;
				this.getInfo();
			},
			getInfo() {
				let data = {
					order:this.orderData.order,
					product_category_id:this.orderData.tag_id,
					status:this.orderData.status
				}
				this.$http('/api/clientDetail/' + this.id, data, 'get').then(res => {
					if (res.code == 200) {
						let datas = res.data;
						this.info = datas.info;
						let statusArr = [];
						datas.status.forEach((item,index)=>{
							statusArr.push({
								id:index,
								name:item
							})
						})
						this.orderData.statusArr = statusArr;
						let tag = datas.product_category;
						let arr = [];
						let tag_id = this.info.product_category_ids?this.info.product_category_ids:'';
						let tag_id_arr = tag_id.split(',');
						if(tag&&tag.length){
							tag.forEach(item=>{
								tag_id_arr.forEach(item2=>{
									if(item.id == item2){
										arr.push(item.name);
									}
								})
							})
						}
						this.info.tag_str = arr.length?arr.join(','):'';
						let obj = {id:0,name:'全部'};
						let arrs = datas.product_category;
						arrs.unshift(obj);
						this.orderData.tagArr = arrs;
						if (this.info.next_visits_time && this.info.next_visits_time.start_at) {
							let obj = this.info.next_visits_time;
							this.info.timeStr = `${obj.start_at.slice(0,-3)}`;
						}
						this.list = datas.list;
						this.list.forEach(item => {
							this.$set(item, 'resultShow', false);
							this.$set(item, 'recordShow', false);
						})
					}
				})
			},
			toSign(item) {
				uni.navigateTo({
					url: '/pages/system/signIn?id=' + item.id+'&clients_id='+item.clients_id
				})
			},
			toRecord(item) {
				// if (item.audio_json) {
				// 	let audio_json = JSON.parse(item.audio_json);
				// 	let audio = audio_json.src;
				// 	let duration = audio_json.duration;
				// 	uni.navigateTo({
				// 		url: '/pages/system/playback?audioSrc=' + audio+'&duration='+duration
				// 	})
				// } else {
					uni.navigateTo({
						url: '/pages/system/startRecord?id=' + item.id
					})
				// }
				// uni.navigateTo({
				// 	url: '/pages/system/recordList?id=' + item.id
				// })
			},
			toUpload(item) {
				let annex_json = item.annex_json?item.annex_json:'';
				uni.setStorageSync('annex_json',annex_json);
				uni.navigateTo({
					url: '/pages/system/uploadFile?id=' + item.id
				})
			},
			preImg(item){
				uni.previewImage({
					urls:[item.sign_in_img],
					current:0
				})
			},
			toEdit(item){
				// if(item.status == 4){
				// 	uni.navigateTo({
				// 		url: '/pages/system/addVisit?id=' + item.id+'&clients_id='+item.clients_id
				// 	})
				// }
			},
			analysis(item){
				if(item.analysis_result!=null)return false;
				if(item.audio_count==0)return false;
				let formData={
					visit_id:item.id
				}
				this.$http('/api/aiAnalysis',formData,'post').then(res=>{
					if(res.code == 200){
						this.getInfo();
					}
				})
			}
		}
	}
</script>
<style>
	.uni-select {
		border: 1px solid red !important;
	}
</style>
<style lang="less" scoped>
	.popup_content {
		width: 95%;
		min-width: 660rpx;
		min-height: 600rpx;
		background-color: #fff;
		border-radius: 20rpx;
		font-size: 28rpx;
		position: relative;

		.close_icon {
			position: absolute;
			bottom: -110rpx;
			left: 50%;
			transform: translateX(-50%);
		}

		.footer {
			padding-top: 50rpx;
			padding-bottom: 60rpx;

			.btn {
				width: 170rpx;
				height: 71rpx;
				text-align: center;
				line-height: 70rpx;
				color: #666;
				background-color: #DEDEDE;
				border: 1px solid #DEDEDE;
				margin-right: 50rpx;
				margin-left: 50rpx;
				border-radius: 20rpx;
				font-size: 30rpx;
			}

			.sure {
				color: #fff;
				background-color: #4072F4;
				border-color: #4072F4;
			}
		}

		.uni-select {
			border: none !important;
		}

		&_title {
			line-height: 3;
			font-size: 32rpx;
			text-align: center;
			padding-top: 20rpx;
		}

		.content_item {
			padding: 20rpx 50rpx 20rpx 30rpx;
			margin: 0 30rpx;
			box-sizing: border-box;

			.name {
				min-width: 130rpx;

			}

			.con_ {
				padding-bottom: 20rpx;
				border-bottom: 1px solid #DEDEDE;
			}
		}
	}

	.add_icon {
		position: fixed;
		bottom: 8%;
		right: 30rpx;
		z-index: 10;
	}


	.container {
		box-sizing: border-box;

		.meun {
			margin-bottom: 30rpx;
			padding: 0 30rpx;
			box-sizing: border-box;

			.menu_item {
				min-width: 120rpx;
				margin-right: 20rpx;
				.icon-img{
					transform: rotate(180deg);
				}
				.name {
					margin-right: 10rpx;
				}
			}
		}

		.card_top_con {
			margin: 0 30rpx;
			background: rgba(255, 255, 255, .75);
			border-radius: 20rpx;
			padding: 20rpx 30rpx;
			margin-bottom: 30rpx;

			.item {
				color: #333;
				margin-bottom: 20rpx;

				.name {
					color: #BEBEBE;
				}
			}
		}

		.card_con {
			background-color: #fff;
			margin-bottom: 20rpx;
			padding: 30rpx;
			font-size: 28rpx;
			box-shadow: 0px 3px 3px 0px #cccddd;
			.item_btn_list {
				margin-top: 50rpx;

				.btn {
					text-align: center;

					.btn_box {}

					.text {
						width: 100%;
						line-height: 2.2;
						text-align: center;
					}
				}

			}

			.item_remark {
				font-size: 26rpx;
				color: #999;
				border-radius: 20rpx;
				// padding: 10rpx 20rpx;
				background: #F7F7F7;
			}

			.item {
				margin-bottom: 20rpx;

				.icon_name {
					position: absolute;
					right: 30rpx;

					.name {
						padding: 5rpx 20rpx;
						background: #F1F1F1;
						border-radius: 32rpx;
						color: #333;
					}

				}

				.name {
					color: #999;
				}

				.con {
					color: #333;
				}

				.icon {
					border-radius: 10rpx;
					padding: 0 15rpx;
					color: #4072F4;
					margin-right: 10rpx;
					font-size: 24rpx;
					border: 1px solid #4072F4;
				}
			}
		}

		.date_box {
			text-align: center;
			line-height: 200rpx;
			border: 1px solid red;
			border-radius: 20rpx;
			margin-bottom: 30rpx;
			margin-left: 30rpx;
			margin-right: 30rpx;
		}

		.search {
			padding: 0 32rpx;
			box-sizing: border-box;
			font-size: 28rpx;
			margin-bottom: 30rpx;

			.text {
				min-width: 100rpx;
				text-align: right;
			}

			.search_con {
				padding: 10rpx 20rpx;
				box-sizing: border-box;
				border: 1px solid #A6D6FF;
				border-radius: 50rpx;
				background-color: rgba(255, 255, 255, .91);
				font-size: 28rpx;

				input {
					font-size: 28rpx;
					color: #fff;

					&::placeholder {
						color: #fff;
					}
				}
			}
		}
	}
	
	.clickable{
		color:blue!important;
		text-decoration: underline;
	}
</style>